<template>
  <div class="my-info">
    <!-- 头部 -->
    <div class="top">
      <div class="bian left" v-show="isshow === 0">
        <div class="zhuan">
          <img src="@/assets/img/user/Button-zhuanshi.png" alt="" />
          35
          <span><van-icon name="add" size="20" /></span>
        </div>
        <div class="vip">
          <img src="@/assets/img/user/icon_huangguan.png" alt="" />
          贵族特权
        </div>
        <div class="zl">编辑资料</div>
      </div>
      <div class="name left" v-show="isshow === 1">
        {{ userInfo.nickName }}
      </div>
      <img
        src="@/assets/img/user/more.png"
        alt=""
        class="more"
        @click="show = true"
      />
    </div>
    <!-- 内容 -->
    <div class="banner" @scroll="scrollShow">
      <div class="my">
        <img :src="userInfo.headurl" alt="" @click="$router.push('gai')" />
        <h1>{{ userInfo.nickName }}</h1>
        <div class="zt">
          <span>
            <img
              :src="
                require(userInfo.sex == '男'
                  ? '@/assets/img/user/sex1.png'
                  : '@/assets/img/user/sex0.png')
              "
              alt=""
            />
          </span>
          <span>
            <img src="@/assets/img/user/ID.png" alt="" />
            {{ userInfo.uid }}</span
          >
          <span>当前在线</span>
        </div>
        <div class="bie">{{ userInfo.signature }}</div>
        <div class="guan">
          <van-badge>
            <div><i>3</i>动态</div></van-badge
          >
          <van-badge>
            <div><i>20</i>关注</div>
          </van-badge>
          <van-badge>
            <div><i>7</i>粉丝</div>
          </van-badge>
          <van-badge :content="'+' + 3">
            <div><i>3</i>最近访客</div>
          </van-badge>
        </div>
      </div>
      <van-tabs background="transparent" color="#FFF">
        <van-tab title="资料">
          <div class="nei">
            <div class="shouhu">
              <h1>
                <p>守护榜</p>
                <span>11 <img src="@/assets/img/user/next.png" alt="" /> </span>
              </h1>
              <ul>
                <li v-for="item in shouhu" :key="item.uid">
                  <img :src="item.headurl" alt="" />
                  <p>{{ item.nickName }}</p>
                </li>
              </ul>
            </div>
            <div class="biao">
              <p>关于我0/8</p>
              <div><img src="@/assets/img/user/jia.png" alt="" />添加标签</div>
              <p>希望认识0/8</p>
              <div><img src="@/assets/img/user/jia.png" alt="" />添加标签</div>
            </div>
            <div class="dong">
              <p class="title">动态</p>
              <ul>
                <li v-for="item in dongtai" :key="item.id">
                  <div class="ren">
                    <div class="head">
                      <img :src="userInfo.headurl" alt="" />
                      <div>
                        <p>{{ userInfo.nickName }}</p>
                        <div class="sex">
                          <img
                            :src="
                              require(userInfo.sex == '男'
                                ? '@/assets/img/user/sex1.png'
                                : '@/assets/img/user/sex0.png')
                            "
                            alt=""
                          />
                        </div>
                      </div>
                    </div>
                    <img src="@/assets/img/user/more2.png" alt="" />
                  </div>
                  <p class="content">{{ item.message }}</p>
                  <div class="fot">
                    <p>{{ item.ctime.toLocaleString() }}</p>
                    <div>
                      <span>
                        <img src="@/assets/img/user/ai.png" alt="" />0
                      </span>
                      <span>
                        <img src="@/assets/img/user/yu.png" alt="" />0
                      </span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </van-tab>
        <van-tab title="作品">
          <div class="nei2">什么都没有</div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 尾部 -->
    <div class="end">
      <div class="song">
        <img src="@/assets/img/user/liwu.png" alt="" />送礼
      </div>
      <div class="pai" @click="$router.push('/find/pub')">
        <img src="@/assets/img/user/xiangji.png" alt="" />
      </div>
    </div>
    <!-- 弹出层 -->
    <van-popup v-model="show" position="right"
      ><div class="gongneng">
        <ul>
          <li>
            <p><img src="@/assets/img/user/gai/t11.png" alt="" class="tu1" />信誉分100</p>
          </li>
          <li>
            <p> <img src="@/assets/img/user/gai/t12.png" alt="" class="tu1" />背包</p>
            <img src="@/assets/img/user/gai/g3.png" alt="" class="tu2" />
          </li>
          <li>
            <p><img src="@/assets/img/user/gai/t13.png" alt="" class="tu1" />商城</p>
            <img src="@/assets/img/user/gai/g3.png" alt="" class="tu2" />
          </li>
          <li>
            <p><img src="@/assets/img/user/gai/t14.png" alt="" class="tu1" />贡献题目</p>
            <img src="@/assets/img/user/gai/g3.png" alt="" class="tu2" />
          </li>
          <li>
            <p><img src="@/assets/img/user/gai/t15.png" alt="" class="tu1" />分享有礼</p>
            <img src="@/assets/img/user/gai/g3.png" alt="" class="tu2" />
          </li>
          <li>
            <p><img src="@/assets/img/user/gai/t16.png" alt="" class="tu1" />我的等级</p>
            <img src="@/assets/img/user/gai/g3.png" alt="" class="tu2" />
          </li>
        </ul>
        <ul>
          <li>
            <p><img src="@/assets/img/user/gai/t17.png" alt="" class="tu1" />账号与安全</p>
            <img src="@/assets/img/user/gai/g3.png" alt="" class="tu2" />
          </li>
          <li>
            <p><img src="@/assets/img/user/gai/t18.png" alt="" class="tu1" />意见反馈</p>
            <img src="@/assets/img/user/gai/g3.png" alt="" class="tu2" />
          </li>
          <li>
            <p><img src="@/assets/img/user/gai/t19.png" alt="" class="tu1" />我的客服</p>
            <img src="@/assets/img/user/gai/g3.png" alt="" class="tu2" />
          </li>
          <li>
            <p><img src="@/assets/img/user/gai/t20.png" alt="" class="tu1" />设置</p>
            <img src="@/assets/img/user/gai/g3.png" alt="" class="tu2" />
          </li>
          <li>
            <p><img src="@/assets/img/user/gai/t21.png" alt="" class="tu1" />关于我们</p>
            <img src="@/assets/img/user/gai/g3.png" alt="" class="tu2" />
          </li>
        </ul>
        <p class="tui" @click="zhuXiao()">
        <span><img src="@/assets/img/user/gai/t22.png" alt="" class="tu1" />退出</span>
           <img src="@/assets/img/user/gai/g3.png" alt="" class="tu2" />
        </p>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  postUserInfoSelect,
  getRandomUser,
  postSelectDynamic,
  getLoginOut,
} from "@/services";
export default {
  created() {
    // 获取个人信息
    postUserInfoSelect(localStorage.getItem("uids")).then((res) => {
      this.userInfo = res.data;
    });
    // 随机展示4个人
    getRandomUser({ uid: localStorage.getItem("uids") }).then((res) => {
      this.shouhu = res.data.data;
    });
    // 动态
    postSelectDynamic(localStorage.getItem("uids")).then((res) => {
      this.dongtai = res.data;
    });
  },
  data() {
    return {
      isshow: 0,
      userInfo: [],
      shouhu: [],
      dongtai: [],
      show: false,
    };
  },
  methods: {
    scrollShow(e) {
      if (e.target.scrollTop > 50) {
        this.isshow = 1;
      } else {
        this.isshow = 0;
      }
    },
    zhuXiao() {
      getLoginOut({ uid: localStorage.getItem("uids") }).then((res) => {
        localStorage.removeItem("uids");
        localStorage.removeItem("phone");
        this.$router.push("/login");
      });
    },
  },
};
</script>

<style lang="scss">
.my-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  .top {
    margin-top: 60px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 44px;
    padding: 0 40px;
    .left {
      flex: 1;
    }
    .bian {
      display: flex;
      .zhuan {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 124px;
        height: 42px;
        border: 2px solid #b5b5b5;
        border-radius: 20px;
        font-size: 24px;
        color: #fff;
        img {
          width: 29px;
          height: 22px;
          margin-right: 7px;
        }
        span {
          margin-left: 12px;
        }
      }
      .vip {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20px;
        width: 148px;
        height: 44px;
        border: 2px solid #fee2b0;
        border-radius: 22px;
        font-size: 20px;
        font-weight: 500;
        color: #fee2b0;
        img {
          width: 30px;
          height: 26px;
          margin-left: 7px;
        }
      }
      .zl {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 193px;
        width: 124px;
        height: 42px;
        border: 2px solid #b5b5b5;
        border-radius: 20px;
        font-size: 24px;
        font-weight: 400;
        color: #fefefe;
      }
    }
    .name {
      text-align: center;
      line-height: 44px;
      font-size: 30px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #fefefe;
    }
    .more {
      width: 34px;
      height: 32px;
    }
  }
  .banner {
    width: 100%;
    flex: 1;
    overflow: auto;
    padding: 0 30px;
    .my {
      margin-top: 98px;

      img {
        width: 144px;
        height: 144px;
        border-radius: 50%;
      }
      h1 {
        font-size: 36px;
        font-weight: 400;
        color: #fefefe;
      }
      .zt {
        margin-top: 27px;
        span {
          margin-right: 10px;
          display: inline-block;
          background: #2a2b3f;
          padding: 5px 17px;
          border-radius: 4px;
          font-size: 20px;
          font-weight: 400;
          color: #c1c1c1;
        }
        img {
          width: 15px;
          height: 17px;
          border-radius: 0px;
        }
      }
    }
    .bie {
      margin-top: 43px;
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #999999;
    }
    .guan {
      padding: 40px 0;
      border-bottom: 2px solid #c1c1c12a;
      .van-badge--fixed {
        color: #fff;
        top: 10px;
      }
      div {
        font-size: 20px;
        font-weight: 400;
        color: #999999;
        margin-right: 20px;
        i {
          font-size: 36px;
          font-weight: 400;
          color: #ffffff;
          margin-right: 10px;
        }
      }
    }
    .van-tabs__wrap {
      margin-top: 20px;
      width: 200px;
      height: 80px;
    }
    .van-tab__text--ellipsis {
      height: 100%;
      display: flex;
      align-items: center;
    }
    .van-tab {
      font-size: 30px;
      font-weight: 500;
      color: #666666;
    }
    .van-tab--active {
      font-size: 36px;
      font-weight: 500;
      color: #ffffff;
    }
    .nei2 {
      margin-top: 100px;
      font-size: 50px;
      text-align: center;
      color: #fff;
    }
    .nei {
      margin-top: 71px;
      .shouhu {
        h1 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 30px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #ffffff;
          span {
            font-size: 24px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #666666;
            img {
              width: 9px;
              height: 17px;
              margin-left: 15px;
            }
          }
        }
        ul {
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-top: 40px;
          height: 180px;
          background: linear-gradient(90deg, #302f34 0%, #18191b 100%);
          border-radius: 20px;
          li {
            text-align: center;
            img {
              width: 96px;
              height: 96px;
              border-radius: 50%;
            }
            p {
              font-size: 24px;
              color: #999999;
            }
          }
        }
      }
      .biao {
        p {
          font-size: 30px;
          margin-top: 40px;
          color: #ffffff;
        }
        div {
          margin-top: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 188px;
          height: 60px;
          background: #27283b;
          border-radius: 30px;
          font-size: 24px;
          color: #63d197;
        }
      }
      .dong {
        .title {
          margin-bottom: 31px;
          margin-top: 73px;
          font-size: 30px;
          color: #ffffff;
        }
        ul {
          li {
            margin-top: 30px;
            border-bottom: 2px solid #c1c1c119;
            .ren {
              display: flex;
              justify-content: space-between;
              align-items: center;
              .head {
                display: flex;
                img {
                  width: 90px;
                  height: 90px;
                  border-radius: 50%;
                }
                div {
                  margin-left: 16px;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  p {
                    font-size: 30px;
                    color: #fefefe;
                  }
                  .sex {
                    width: 48px;
                    height: 30px;
                    background: #2a2b3f;
                    border-radius: 4px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    img {
                      width: 15px;
                      height: 17px;
                      border-radius: 0px;
                    }
                  }
                }
              }
              img {
                width: 6px;
                height: 30px;
              }
            }
            .content {
              font-size: 30px;
              color: #fefefe;
              margin: 17px 0;
            }
            .fot {
              display: flex;
              margin-bottom: 32px;
              p {
                font-size: 20px;
                color: #666666;
              }
              div {
                margin-left: 250px;
                span {
                  margin-left: 43px;
                  font-size: 30px;
                  font-weight: 500;
                  color: #666666;
                  img {
                    width: 30px;
                    height: 26px;
                    margin-right: 10px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .end {
    width: 100%;
    height: 196px;
    padding-top: 20px;
    display: flex;
    .song {
      margin-left: 243px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 256px;
      height: 88px;
      background: #ffffff;
      border-radius: 44px;
      font-size: 30px;
      font-weight: 500;
      color: #a780c7;
      img {
        width: 31px;
        height: 31px;
        margin-right: 19px;
      }
    }
    .pai {
      margin-left: 133px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 88px;
      height: 88px;
      background: #63d197;
      border-radius: 50%;
      img {
        width: 40px;
        height: 37px;
      }
    }
  }
  // 功能栏
  .van-popup {
    background-color: #1c1c1c;
    color: #fff;
    height: 100%;
    width: 542px;
    .gongneng {
      margin-top: 50px;
      .tu1{
           width:32px;
           height:32px;
          margin-right: 27px;
        }
      ul {
        border-bottom: 2px solid #c1c1c147;
      }
      li,
      .tui {
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100px;
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        .tu2 {
          width: 12px;
          height: 19px;
        }
        p{
          display: flex;
        justify-content: space-between;
        align-items: center;
        }
      }
      .tui {
        margin-top: 38px;
        span{
          display: flex;
        justify-content: space-between;
        align-items: center;
        }
      }
    }
  }
}
</style>
